<template>
  <div class="t-home">
    <div class="t-home-head">
      <div class="t-home-head-left">
        <img :src="userStore.avatar" alt="">
        <div>
          <h1>早安, {{ userStore.nickName }}, 开始您一天的工作吧！</h1>
          <span>{{ nowTime }}</span>
        </div>
      </div>
      <div class="t-home-head-right">
        <ul>
          <li>
            <h4>待办</h4>
            <span>2/10</span>
          </li>
          <li>
            <h4>项目</h4>
            <span>6</span>
          </li>
          <li>
            <h4>团队</h4>
            <span>20</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="t-home-body">
      <div class="t-home-body-left">
        <app-flow />
        <Projects style="margin-top: 16px;" />
        <Messages style="margin-top: 16px;"/>
      </div>
      <div class="t-home-body-right">
        <quick-nav />
        <icon-card style="margin-top: 16px;" icon-name="illustration"/>
        <sales-chart style="margin-top: 16px;" />
      </div>
    </div>
  </div>
</template>

<script setup name="Index">
import Projects from "@/views/analysis/cards/projects.vue";
import Messages from "@/views/analysis/cards/messages.vue";
import QuickNav from "@/views/analysis/cards/quickNav.vue";
import IconCard from "@/views/analysis/cards/iconCard.vue";
import SalesChart from "@/views/analysis/cards/salesChart.vue";
import useUserStore from "@/store/modules/user.js";
import {parseTime} from "@/utils/ruoyi.js";
import AppFlow from "@/views/analysis/cards/appFlow.vue";


const {proxy} = getCurrentInstance();

const nowTime = ref('')
nowTime.value = parseTime(new Date());
// 账号信息
const userStore = useUserStore()

const version = ref('1.0.0')

function goTarget(url) {
  window.open(url, '__blank')
}

// 定时实时更新时间
const timeInterval = setInterval(() => {
  nowTime.value = parseTime(new Date());
}, 1000)

</script>

<style scoped lang="scss">
.t-home {

  &-head {
    box-sizing: border-box;
    margin: 0;
    padding: 20px 24px;
    color: rgba(0, 0, 0, 0.88);
    font-size: 14px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;

    &-left {
      display: flex;
      align-items: center;

      > img {
        width: 70px;
        height: 70px;
        border-radius: 50%;
      }

      > div {
        margin-left: 20px;

        > h1  {
          font-size: 18px;
          margin: 0 0 14px 0;
        }

        > span  {
          font-size: 14px;
          color: rgba(0, 0, 0, 0.6);
        }
      }

    }

    &-right {

      ul {
        display: flex;
        align-items: center;

        li {
          text-align: right;
          margin-right: 40px;

          > h4 {
            margin: 0 0 14px 0;
            font-size: 14px;
            color: rgba(0, 0, 0, 0.6);
          }

          span {
            font-size: 24px;
          }
        }
      }
    }
  }

  &-body {
    margin: 16px;
    display: flex;

    &-left {
      width: 70%;
      margin-right: 16px;
    }

    &-right {
      width: 30%;
    }
  }
}
</style>

